<template>
  <div class="student-management">
    <header>
      <div class="sub-header">温州理工滨海校区</div>
      <div class="search-container">
        <input v-model="studentId" placeholder="123456" />
        <button @click="searchStudent">搜索</button>
      </div>
    </header>

    <section v-if="studentInfo" class="student-info">
      <h2>学生信息</h2>
      <p><strong>学号:</strong> {{ studentInfo.id }}</p>
      <p><strong>姓名:</strong> {{ studentInfo.name }}</p>
      <p><strong>年龄:</strong> {{ studentInfo.age }}</p>
      <p><strong>专业:</strong> {{ studentInfo.major }}</p>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentId: '',
      studentInfo: null,
      studentsDatabase: [
        {
          id: '123456',
          name: '李小明',
          age: 18,
          major: '计算机科学'
        }
      ]
    };
  },
  methods: {
    searchStudent() {
      if (!this.studentId) {
        alert('请输入学号');
        return;
      }
      
      const foundStudent = this.studentsDatabase.find(
        student => student.id === this.studentId
      );
      
      if (foundStudent) {
        this.studentInfo = foundStudent;
      } else {
        alert('未找到该学号的学生');
        this.studentInfo = null;
      }
    },
  },
};
</script>

<style scoped>
.student-management {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 30px;
}

header h1 {
  color: #333;
  margin-bottom: 5px;
}

.sub-header {
  color: #666;
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.search-container input {
  padding: 8px 12px;
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-container button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #45a049;
}

.student-info {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
}

.student-info h2 {
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-top: 0;
}

.student-info p {
  margin: 10px 0;
  line-height: 1.6;
}
</style>